// JavaScript Document
/* PROJECT : Aplay Menues
*	@require MyClass.js
*	@require MyUtils.js
*	@autor: Mauricio Sanchez
*	@create: 31-07-2009
*	Menu con botonera y contenido dinamico
*/

MiniMenu = new MyClass({
	CLASS_NAME: "MiniMenu",	
	
	/**  
	 * CONSTANTS
     */
	 HEIGHT_BUTTONBAR: '25px',
	 HEIGHT_SEARCHBAR: '26px',
	 
	 /**  
     * Property: name
	 * 	 Nombre del MiniMenu.
     * {String}
     */
	 name: '',
	 
	 /**  
     * Property: height
	 * 	 Altura del MiniMenu.
     * {String}
     */
	 height: '200px',
	 
	 /**  
     * Property: width
	 * 	 Ancho del MiniMenu.
     * {String}
     */
	 width: '100%',
	 
	 /**  
     * Property: contentId
	 * 	 Id del Elemento DIV donde se especifica el contenido del MiniMenu.
     * {Styring}
     */
	 contentId: '',
	 
	 /**  
     * Property: _container
	 * 	 Elemento DIV donde se imprime el menu.
     * {DOMELEMENT}
     */
	 container: null,
	  
	 /**  
     * Propertyes: 
	 * 	 Elementos DOMELEMENT que componen el MiniMenu.
     * {DOMELEMENT}
     */
	 _buttonBar: null, //DIV que contiene la barra de titulo.
	 _searchBar: null, //DIV que contiene la barra de seleccion de paneles.
	 _content: null, //DIV que contiene contenido.
	 _buttonSearch: null, //Boton especial que muestra/oculta el panel de busqueda '_searchBar'.
	 
	 /**  
     * Property: _buttons
	 * 	 Array con los elementos DOM que representan los botones del menu
     * {Array[DOMELEMENT]} - Array('Div')
     */
	 _buttons: null,
	 
	/** 
     * Method: init
     */
	init: function(opciones){
		for (var key in opciones) {
			this[key] = opciones[key]; 
		}
		this._buttons=new Array();
		//cargar el container		
		if (this.contentId!=''){
			this.container = document.getElementById(this.contentId);
		}				
		this.container.style.width = this.width;
		this.container.style.height = this.height;	
		var me = this;
		if (this._content==null){
			//creo el content y lo cargo con lo que tenia el container.
			this._content = document.createElement('div');
			this._content.className = "Content";
			with(this._content.style){
				width = this.width;
		 		height = (parseInt(this.height)-parseInt(this.HEIGHT_BUTTONBAR))+'px';
			}
			var childs =  this.container.childNodes;
			var count = childs.length;
			for (var i=0; i<count; i++){
				this._content.appendChild(childs[0]);
			}
		}
		this.container.innerHTML = "";
			
		//crear la button bar.
		this._buttonBar = document.createElement('div');
		this._buttonBar.className = "ButtonBar";
		with (this._buttonBar.style){
			width = this.width;
			height = this.HEIGHT_BUTTONBAR;
		}
		
		//crear la searchBar		
		this._searchBar = document.createElement('div');
		this._searchBar.className = "SearchBar";
		with (this._searchBar.style){
			width = this.width;
			height = this.HEIGHT_SEARCHBAR;
			display = "none"; //invisible por defecto
		}
		
		this.container.appendChild(this._buttonBar);
		this.container.appendChild(this._searchBar);
		this.container.appendChild(this._content);		
	},
	
	/** 
     * Method: getHeight
     * 	 Retorna la altura en pixeles del MiniMenu.
	 * Return:
	 *	{Integer}
     */
	getHeight: function(){
		return parseInt(this.height);	
	},
	
	/** 
     * Method: getWidth
     * 	 Retorna el ancho en pixeles del MiniMenu.
	 * Return:
	 *	{Integer}
     */
	getHeight: function(){
		return parseInt(this.width);	
	},
	
	/** 
     * Method: addButton
     * 	 Crea y agrega un boton al menu.
	 * Params ({options}):
	 *	classButton - {String} clase del boton (definidas en miniMenu.css).
	 *  onClickFunction - {String | Function} : Nombre de la funcion o metodo a evaluar al hacer click sobre el boton.
	 *  [classOnClick] - {String} : clase del boton (definida en miniMenu.css) que se va intercalando con 'class' cuando se hace click en el mismo.
	 *  [info] - {String} : Informacion sobre el boton (se muestra como un atributo 'title')
	 * Return:
	 *	{DOMELEMENT} - Boton.
     */
	addButton: function(opciones){
		//opciones
		var params = { classButton: null,
					   onClickFunction: null,
					   classOnClick: null,
					   info: null
					 };
		for (var key in opciones) {
			params[key] = opciones[key]; 
		}		
		var me = this;
		var button = document.createElement('div');
		button.className = "Button";	
		button.style.height = (parseInt(me.HEIGHT_BUTTONBAR)-2) + 'px';
		var buttonStyled = document.createElement('div');
		buttonStyled.className = params['classButton'];
		buttonStyled.id = 'buttonStyled';
		buttonStyled.style.width = '100%';
		buttonStyled.style.height = '100%';
		buttonStyled.style.overflow = 'hidden';
		button.appendChild(buttonStyled);
		
		var onMouseOver = function(){
			button.className = "ButtonOver";
		}		
		button.onmouseover = onMouseOver;
		
		var onMouseOut = function(){
			button.className = "Button";
		}
		button.onmouseout = onMouseOut;
		
		if (params['onClickFunction']!=null){
			button.style.cursor = "pointer";
			var onMouseClick = function(){
				buttonStyled.style.cursor = "pointer";
				if (params['classOnClick']!=null){
					if (buttonStyled.className==params['classOnClick'])
						buttonStyled.className = params['classButton'];
					else
						buttonStyled.className=params['classOnClick'];
				}				
				try{
					params['onClickFunction']();							
				}
				catch(e){
					try{
						eval(params['onClickFunction']);
					}
					catch(e2){
						alert('MiniMenu.js :: Funcion o llamada a funcion desconocida en el boton "'+params['classButton']+'"');
					}
				}
			};
			button.onclick = onMouseClick;
		}		
		//set title
		if (params['info']!=null)
			button.title = params['info'];		
		this._buttons.push(button);
		this._buttonBar.appendChild(button);
		return (this.button);
	},
	
	
	/** 
     * Method: addButton
     * 	 Crea y agrega un boton al menu.
	 * Params ({options}):
	 *  [info] - {String} : Informacion sobre el boton (se muestra como un atributo 'title').
	 *  [idInput] - {String} : Id que se le quiere dar al input de la busqueda. 
	 *  [idCount] - {String} : Id que se le quiere dar al Div que imprime la cantidad de resultados.
	 *  [textValue] - {String} : Texto que se muestra en el input text cuando este esta vacio o ce hizo un clean
	 *	searchFunction - {String} : Nombre de la funcion a ejecutar cuando se hace onClick en la busqueda.
	 *	[cleanFunction] - {String} : Funcion a ejecutar cuando se hace onClick en el boton clean.
     */
	addButtonSearch: function(opciones){
		if (this._buttonSearch!=null){
			alert('El menu "'+this.name+'" ya tiene creado un boton de busqueda.');
			return;
		}
		//opciones
		var params = { info: null,
					   idInput: 'inputMiniMenuSearch',
					   idCount: 'countMiniMenuSearch',
					   textValue: 'Buscar...',
					   searchFunction: null,
					   cleanFunction: null
					 };
		for (var key in opciones) {
			params[key] = opciones[key]; 
		}		
		var me = this;
		//creo el contenido de '_searchBar'
		//CREATE INPUT TO SEARCH BAR
		var inputSearch 	= document.createElement('input');
		inputSearch.type	= "text";
		inputSearch.size 	= "15";
		inputSearch.className = 'searchField';
		inputSearch.name 	= params['idInput'];
		inputSearch.id 		= params['idInput'];
		inputSearch.value 	= params['textValue'];
		inputSearch.onfocus = function(){
								 if(inputSearch.value == params['textValue']) 
								 	inputSearch.value = '';
							  };
		inputSearch.onblur = function(){
								 if(inputSearch.value == '') 
								 	inputSearch.value = params['textValue'];
							  };
		inputSearch.onkeyup = function(event){
									if(event.which == 13){//ENTER
										try{
											params['searchFunction'](inputSearch.value);	
										}catch(e){
											try{
												eval(params['searchFunction']);
											}catch(e2){
												alert('MiniMenu.js :: Funcion o llamada a funcion desconocida en el boton "search" de la SearchBar');
											}
										}
									}
							};
		me._searchBar.appendChild(inputSearch);
		//CREATE SEARCH BUTTON IN SEARCH BAR
		var inputSubmitBtn = document.createElement('input');
		inputSubmitBtn.type="submit";
		inputSubmitBtn.className = 'search-go';
		inputSubmitBtn.value = "";
		inputSubmitBtn.onclick = function(){
									try{
										params['searchFunction'](inputSearch.value);	
									}
									catch(e){
										try{
											eval(params['searchFunction']);
										}
										catch(e2){
											alert('MiniMenu.js :: Funcion o llamada a funcion desconocida en el boton "search" de la SearchBar');
										}
									}
								 };
		me._searchBar.appendChild(inputSubmitBtn);	
		//CREATE CLEAN BUTTON IN SEARCH BAR
		var inputCleanBtn = document.createElement('input');
		inputCleanBtn.type="submit";
		inputCleanBtn.className = 'search-clean';
		inputCleanBtn.value = "";
		inputCleanBtn.onclick = function(){
									inputSearch.value = params['textValue'];
									spanCount.innerHTML = "";
									if (params['cleanFunction']!=null){
										try{
											params['cleanFunction'](inputSearch.value);							
										}
										catch(e){
											try{
												eval(params['cleanFunction']);
											}
											catch(e2){
												alert('MiniMenu.js :: Funcion o llamada a funcion desconocida en el boton "clean" de la SearchBar');
											}
										}
									}
								 };
		me._searchBar.appendChild(inputCleanBtn);		
		//CREATE SPAN COUNT MATCHES IN SEARCH BAR
		var spanCount = document.createElement('span');
		spanCount.className = 'search-count';
		spanCount.id = params['idCount'];
		me._searchBar.appendChild(spanCount);

		//add search button to ButtonBar
		var onClickBtnSearch = function(){
									if (me._searchBar.style.display == "block"){
										me._searchBar.style.display = "none";
										me._content.style.height = (parseInt(me._content.style.height) + parseInt(me.HEIGHT_SEARCHBAR)) + 'px';
									}else{
										me._searchBar.style.display = "block";
										me._content.style.height = (parseInt(me._content.style.height) - parseInt(me.HEIGHT_SEARCHBAR)) + 'px';
										inputSearch.focus();
									}		
								};
		me._buttonSearch = me.addButton({
					   					classButton: 'search',
					   					onClickFunction: onClickBtnSearch,
					 					info: params['info']
				 					    });
		
	},
	
	/** 
     * Method: showMenu
     * 	 Muestra el MiniMenu.
     */
	showMenu: function(){
		this.container.style.display = "block";
	},
	
	/** 
     * Method: hideMenu
     * 	 Oculta el MiniMenu.
     */
	hideMenu: function(){
		this.container.style.display = "none";
	}
	
});